import React from 'react';
import './index.less';
import { Button, TextArea } from 'antd-mobile';
import { useParams } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import classnames from 'classnames';
import Title from '../../components/title';

function RtlDemo(props: any) {
  const routeParams: any = useParams();
  const routeTitle = routeParams.title;

  const { rtlStore } = props;
  console.log('rtl.tsx ===', rtlStore.isRtl);

  const turnRtl = () => {
    rtlStore.changeRtl(true);
  };
  const turnLtr = () => {
    rtlStore.changeRtl(false);
  };

  const text =
    "Rtl 布局 使用 transform: scaleX(-1); \ndocument.documentElement.style.transform = 'scaleX(-1)';\ndocument.documentElement.style.transform = 'scaleX(1)';\ntransform 对于 iOS 13 一下的系统容易使 定位失效\n可以使用 position:sticky; 解决这个问题\ninput 输入框  text-align: right;  text-align: left; \n图片需要提供两套\n最好的办法，写两套 css  推荐使用此方法!!!!";

  return (
    <div className={classnames({ 'rtl-demo': rtlStore.isRtl, 'ltr-demo': !rtlStore.isRtl, page: true })}>
      <Title title={routeTitle} left={true} />
      <Button color='primary' onClick={() => turnRtl()}>
        切换成 Rtl 布局
      </Button>
      <Button color='primary' onClick={() => turnLtr()}>
        切换成 Ltr 布局
      </Button>
      <p>123456789</p>
      <input placeholder='请输入' />
      <TextArea defaultValue={text} showCount autoSize={true} />
    </div>
  );
}
export default inject('languageStore', 'rtlStore')(observer(RtlDemo));
